import React, { useState, useEffect } from 'react';
import { Row, Col, Card, Statistic, Progress, Space, Typography } from 'antd';
import { 
  ExperimentOutlined, 
  FileTextOutlined, 
  CheckCircleOutlined,
  ClockCircleOutlined
} from '@ant-design/icons';
import axios from 'axios';

const { Title } = Typography;

const Dashboard = () => {
  const [stats, setStats] = useState({
    totalBoxes: 0,
    totalTests: 0,
    todayTests: 0,
    avgConfidence: 0
  });

  useEffect(() => {
    fetchStats();
  }, []);

  const fetchStats = async () => {
    try {
      const response = await axios.get('http://localhost:3001/api/admin/stats');
      setStats(response.data.stats);
    } catch (error) {
      console.error('获取统计数据失败:', error);
    }
  };

  return (
    <div>
      <Title level={2}>仪表盘</Title>
      
      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="总检测盒数"
              value={stats.totalBoxes}
              prefix={<ExperimentOutlined />}
              valueStyle={{ color: '#1e3a8a' }}
            />
          </Card>
        </Col>
        
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="总检测次数"
              value={stats.totalTests}
              prefix={<FileTextOutlined />}
              valueStyle={{ color: '#10b981' }}
            />
          </Card>
        </Col>
        
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="今日检测"
              value={stats.todayTests}
              prefix={<ClockCircleOutlined />}
              valueStyle={{ color: '#f59e0b' }}
            />
          </Card>
        </Col>
        
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="平均置信度"
              value={stats.avgConfidence}
              precision={1}
              suffix="%"
              prefix={<CheckCircleOutlined />}
              valueStyle={{ color: '#8b5cf6' }}
            />
          </Card>
        </Col>
      </Row>

      <Row gutter={[16, 16]}>
        <Col xs={24} lg={12}>
          <Card title="检测进度概览" style={{ height: '300px' }}>
            <Space direction="vertical" size="large" style={{ width: '100%' }}>
              <div>
                <div style={{ marginBottom: 8 }}>30分钟快速检测</div>
                <Progress 
                  percent={95} 
                  strokeColor="#10b981"
                  format={() => '临床精度 >95%'}
                />
              </div>
              <div>
                <div style={{ marginBottom: 8 }}>AI算法分析</div>
                <Progress 
                  percent={100} 
                  strokeColor="#1e3a8a"
                  format={() => '已完成'}
                />
              </div>
              <div>
                <div style={{ marginBottom: 8 }}>数据同步</div>
                <Progress 
                  percent={85} 
                  strokeColor="#f59e0b"
                  format={() => '85%'}
                />
              </div>
            </Space>
          </Card>
        </Col>
        
        <Col xs={24} lg={12}>
          <Card title="miR-193a-5p 检测说明" style={{ height: '300px' }}>
            <Space direction="vertical" size="middle">
              <p>• 特异性序列: 5'-UGGGUCUUUGCGGGCGAGATGA-3'</p>
              <p>• 检测原理: 基于miRNA表达水平的AI算法分析</p>
              <p>• 临床意义: 辅助疾病早期筛查和诊断</p>
              <p>• 注意事项: 结果需结合临床症状综合评估</p>
            </Space>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Dashboard;